<template>
  <div 
  class="pay-box"
  v-loading="loading"
  element-loading-text="正在拼命支付中"
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div @click="cancel" class="cancel">X</div>
    <div v-show="!isPay" class="pay-QR">
      <img src="../assets/payQR.png" alt="">
      <div class="msg">
        请扫描二维码支付
        <div class="pay-methods">
          <img src="../assets/wechatPay.png" alt="">
          <img src="../assets/unionPay.png" alt="">
          <img src="../assets/alipay.png" alt="">
        </div>
      </div>
    </div>
    <div v-show="isPay" class="pay-sucess">
      <img src="../assets/paySucess.png" alt="">
      <div class="msg">
        <span>{{ time }}</span>秒后自动关闭...
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'PayBox',
    data(){
      return {
        // 用于记录是否展示支付成功页面
        isPay:false,
        // 用于记录弹出关闭倒计时
        time:5,
        // 用于记录加载
        loading:false,
      }
    },
    methods:{
      // 关闭弹框
      cancel(){
        this.$bus.$emit('showPayBox',false)
        this.isPay = false
        clearInterval(this.timer)
      },
      openTimer(){
        console.log('倒计时定时器被开启..')
        // 设置定时器
        this.timer = setInterval(()=>{
          this.time -= 1
          if(this.time <=0 ){
            this.time = 5
            // 切换为二维码展示
            this.isPay = false
            // 时间结束后自动关闭支付弹框
            this.$bus.$emit('showPayBox',false)
            // 清除定时器
            clearInterval(this.timer)
          }
          console.log(this.time,'timer:',this.timer)
        },1000)
      },
    },
    mounted(){
      // 模拟进行支付
      this.$bus.$on('beginPay',(msg) => {
        console.log('我是模拟支付加载中...')
        if(msg !== '已支付'){
          return alert('未支付')
        }

        this.loading = true
        setTimeout(()=>{
          this.loading = false
          // 3秒后展示支付成功弹框
          this.isPay = true
          // 3秒后开启倒计时定时器
          this.$bus.$emit('openTimer')
        },3000)
      })

      // 触发定时器
      this.$bus.$on('openTimer',this.openTimer)
    }
    
  }
  
</script>

<style>
  .pay-box{
    position: absolute;
    top: 100px;
    left: 650px;
    width: 400px;
    height: 280px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.5) ;
  }
  .pay-sucess img{
    margin: 10px 95px;
    height: 180px;
    width: 210px;
  }
  .pay-sucess .msg{
    margin: 10px 130px;
    font-size: 18px;
    height: 26px;
    width: 140px;
  }
  .pay-box .cancel{
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background-color: #cf6722;
    color: #fff;
    text-align: center;
    line-height: 28px;
    border-radius: 14px;
    cursor: pointer;
  }
  .pay-QR .msg{
    text-align: center;
  }
  .pay-QR img{
    margin: 10px 125px;
    width: 150px;
    height: 150px;
  }
  .pay-QR .msg .pay-methods img{
    margin: 5px;
    width: 50px;
    height: 50px;
  }
</style>